<template>
	<view class="main">
		<image class="title-img" src="../../static/title.png" mode=""></image>
			
		<!-- 问题 -->
		<view class="card topic">
			<view class="topic-wrap" :class="{ show: !showAnswer }">
				<view class="card-content">
					<!-- 图片问题 -->
					<view class="img-topic" v-if="info.title_type == 1">
						<image :src="hostUrl + info.title_val" mode="aspectFit"></image>
					</view>
					<!-- 文字问题 -->
					<view class="text-topic" v-if="info.title_type == 2">
						{{ info.title_val }}
					</view>
				</view>
				
				<view class="footer">
					<view class="btn" @click="playAdv">
						<image class="play-img" src="../../static/play.png"></image>
						看广告立即揭秘
					</view>
					<view class="code">
						<view class="label">官方抖音号：{{ dyNumber }}</view>
						<view class="copy" @click="copyHandle">
							<image class="copy-img" src="../../static/copy.png" mode=""></image>
							复制
						</view>
					</view>								
				</view>				
			</view>
			
			<!-- 答案 -->
			<view class="topic-wrap" :class="{ show: showAnswer }">
				<view class="card-content">
					<!-- 文字答案 -->
					<view class="answer-list" v-if="info.answer_type == 2">
						<view class="answer-item" v-for="(item, index) in answerText" :key="index">
							<view class="answer-text">
								{{ item }}
							</view>
						</view>
					</view>

					<!-- 图片答案 -->
					<view class="img-topic" v-if="info.answer_type == 1">
						<image :src="hostUrl + info.answer_val" mode="aspectFit"></image>
					</view>

				</view>
				
				<!-- <view class="footer">
					<view class="btn" @click="nextQuestion">
						下一题
					</view>						
				</view>				 -->
			</view>
		</view>

	</view>
</template>

<script>
	import { requestUrl, dyNumber, appId } from '@/utils/config.js'
	export default {
		data() {
			return {
				// 抖音号
				dyNumber: dyNumber,
				
				// 是否显示答案
				showAnswer: false,
				
				// 文字答案
				answerText: [],
				
				timer: undefined,
				
				// 是否定时弹出广告
				regularPopupAdv: false,

				// 是否正在播放广告
				advIsPlaying: false,
				
				info: '',
				
				// 点击弹出广告
				clickShowAdv: false,
				
				hostUrl: requestUrl,
				
				resData: ''
			}
		},
		async onLoad(options) {
			this.resData = options
			let data = JSON.parse(options.data)
			uni.showLoading({
				title: '加载中'
			})

			if(!data){
				let res = await uni.request({
					url: this.hostUrl + 'api/get-questions',
					method: 'GET',
					header: {
						appid: appId,
					}
				})
				
				let resData = res.data.data
				data = resData.list[0]
			}
			
			uni.request({
				url: this.hostUrl + 'api/get-config',
				method: 'get',
				header: {
					appid: appId,
				},
				success: (res) => {
					uni.hideLoading();
					let { ad_status, name, ad_id } = res.data.data.data
					this.regularPopupAdv = ad_status ? true : false
					this.info = {...res.data.data.data, ...data};
					
					if(this.info.answer_type == 2) this.answerText = this.info.answer_val.split('')
					
					uni.setNavigationBarTitle({
				　　　　title: name //页面切换，更换页面标题
				　　})
					
					this.popupAdv();
					
					this.ad = tt.createRewardedVideoAd({
						// adUnitId: 'zgy6g49yinybb56tcw'
						adUnitId: ad_id
					});
					// 监听错误
					this.ad.onError(err => {
						uni.hideLoading();
						switch (err.errCode) {
							case 1004:
								// 无合适的广告
								break;
							default:
							// 更多请参考错误码文档
						}
					});
						 
					// 监听视频播放完成
					this.ad.onClose(data => {
						uni.hideLoading();
						this.advIsPlaying = false;
						if (data.isEnded) {
							console.log('观看了', data.count, '个视频');
							if(this.clickShowAdv) this.showAnswer = true;
							this.clickShowAdv = false
						} else {
							console.log('未观看完视频');
						}
					});
						 
					// 预加载资源
					this.ad.load();
				},
				fail: (error) => {
					uni.hideLoading();
					uni.showToast({
						title: "系统异常，请稍后再试",
						icon: "none"
					})
				}
			});
			
		},
		onHide(){
			console.log('hide')
			if(this.timer) clearTimeout(this.timer)
		},
		onShow() {
			console.log('show')
			this.showAnswer = false;
		},
		onUnload(){
			if(this.timer) clearTimeout(this.timer)
		},
		methods: {
			// 定时弹出广告
			popupAdv(){
				if(!this.regularPopupAdv) return
				if(this.timer) clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					if(this.getRandom(this.info.ad_rate)) this.playAdv()  
				}, this.info.ad_time * 1000)
			},
			
			// 复制抖音号
			copyHandle(){ 
				tt.setClipboardData({
					data: this.dyNumber,
					success() {
						tt.showToast({
						  title: '复制好了'
						});
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			
			// 播放广告
			playAdv(){
				console.log(this.getRandom(this.info.ad_rate))
				if(this.advIsPlaying) return
			
				clearTimeout(this.timer)
				this.clickShowAdv = true
				uni.showLoading({
					title: '加载中'
				});	
				this.advIsPlaying = true
				this.ad.show();
			},
			
			// 下一题
			nextQuestion(){
				this.showAnswer = false;
			},
			
			// 百分比概率
			getRandom (probability){
			    var probability = Number(probability) || 0;
			    var odds = Math.floor(Math.random()*100);
			 
			    if(probability === 1){return 1};
			    if(odds < probability){
			        return 1;
			    }else{
			        return 0;
			    }
			},
			
			jumpNews(){
				uni.switchTab({
					url: '/pages/news/index'
				})
			}
		}

	}
</script>

<style lang="less">
.main{
	width: 100vw;
	height: 100vh;
	background: url('') center no-repeat;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;  
	 
	.title-img{
		width: 496rpx;
		height: 162rpx;
		padding-top: 58rpx;
		margin: 0 auto;
		display: block;
	}
	
}

.card{
	flex: 1;
	width: calc(100vw - 160rpx);
	margin: 38rpx 80rpx 80rpx;
	background: #F6FAFF;
	border: 16rpx solid #295DDB;
	box-sizing: border-box;
	border-radius: 32rpx;
	
	.card-content{
		flex: 1;
		
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		
		.img-topic{
			width: 100%;
			height: calc(100% - 20rpx);
			// margin: 10px 0;
			
			image{
				width: 100%;
				height: 100%;
			}
		} 
		
		.text-topic{
			margin: 56rpx;
			font-size: 48rpx;
			color: #295DDB;
			line-height: 58rpx;
			text-align: center;
		}
		
		.answer-list{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
		}
		
		.answer-item{
			width: calc(25% - 24rpx);
			height: 122rpx;
			border: 1px solid #295DDB;
			margin: 12rpx;
			box-sizing: border-box;
			
			.answer-text{
				height: 108rpx;
				width: 100%;
				background: #295DDB;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 48rpx;
			}
		}
	}
	
	.footer{
		height: 195rpx;
	}
	
	.btn{
		margin: 0 56rpx;
		background: #295DDB;
		color: #fff;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		font-size: 30rpx;
		
		.play-img{
			width: 27rpx;
			height: 24rpx;
			margin-right: 11rpx;
		}
	}
	
	.code{
		margin: 16rpx 56rpx 52rpx 56rpx;
		color: rgba(0, 0, 0, 0.45);
		font-size: 24rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.copy-img{
			width: 21rpx;
			height: 23rpx;
			margin-right: 5rpx;
		}
		.copy{
			display: flex;
			align-items: center;
			color: #295DDB;
			margin-left: 24rpx;
		}
	}
}

.topic-wrap{
	transition: opacity .3s;
	height: 0;
	opacity: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	
	&.show{
		opacity: 1;
		height: 100%;
	}
}
</style>
